<meta charset="utf-8">
<title>左边导航的样式</title>

<?php
echo <<<canvas
<script>
    //创建绘图容器
    var canvas_index1 = document.getElementById("canvas_index1");
    var canvas_index2 = document.getElementById("canvas_index2");
    var canvas_index3 = document.getElementById("canvas_index3");
    var canvas_index4 = document.getElementById("canvas_index4");
    var canvas_index5 = document.getElementById("canvas_index5");
    var canvas_index6 = document.getElementById("canvas_index6");

	function canvas_triangle(canvas_tri) {
		var context = canvas_tri.getContext("2d");

		//状态设置
    	context.moveTo(0, 0);
    	context.lineTo(0, 48);
   		context.lineTo(18, 24);
    	context.lineTo(0, 0);
		context.fillStyle = "#f34343";  //设置填充颜色

    	//状态绘画
    	context.fill();
	}
   
   canvas_triangle(canvas_index1);
   canvas_triangle(canvas_index2);
   canvas_triangle(canvas_index3);
   canvas_triangle(canvas_index4);
   canvas_triangle(canvas_index5);
   canvas_triangle(canvas_index6);
</script>

canvas;
?>

<script>            
function nav_style() {
	var ul_index = document.getElementById("left_ul");
	var li_index = ul_index.children;
	var len_index = li_index.length;
	var left_img = document.getElementsByTagName("img");

	for(var i = 0; i < len_index; i++) {
		(function (num) {
			li_index[num].onclick = function () {
				for(var j = 0; j < len_index; j++) {
					if(li_index[j].className == "active_nav") {
						li_index[j].className = "";
					}
				}

				li_index[num].className = "active_nav";
			}
		}(i))
	}
}             
</script>

<?php
	echo "<script>nav_style();</script>";
?>

<script>
	var left_img = document.getElementsByTagName("img");
	var len = left_img.length;
	for(var i = 0; i < len; i++) {
		(function (num) {
			li_index[num].onclick = function () {
				for(var j = 0; j < len_index; j++) {
					if(li_index[j].className == "active_nav") {
						li_index[j].className = "";
					}
				}

				li_index[num].className = "active_nav";
			}
		}(i))
	} 
</script>